<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>发表评论</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<script type="text/javascript">
    function setRem() {
        var html = document.documentElement;
        var hWidth = html.getBoundingClientRect().width;
        html.style.fontSize = hWidth / 16 + 'px';
    }

    setRem();
</script>
<link rel="stylesheet" href="./comment.css"/>
<script src="./jquery-1.9.1.js"></script>

<body>
<form action="" method="post" enctype="multipart/form-data">
    <div class="introduced inputdivbox">
        <div class="edit">
            <textarea id="edit" name="" placeholder="请输入…"></textarea>
        </div>
        <div class="z_photo">
            <section class="up-section" cc="0">
                <span class="close-upimg" style="display: none;">-</span>
                <img src="./ct.png" onclick="$('.file').eq(0).click()" class="add-img upimg"/>
                <input type="file" name="" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp"
                       style="display: none;" onchange="previewImages(this,0)"/>
            </section>
        </div>
        <aside class="mask works-mask">
            <div class="mask-content">
                <p class="del-p ">您确定要删除活动图片吗？</p>
                <p class="check-p"><span class="wsdel-no">取消</span><span class="del-com wsdel-ok">确定</span></p>
            </div>
        </aside>
    </div>

    <input type="submit" name="submit" value="确定发布"/>
</form>
<h1 class="alertbox">
</h1>
</body>
<script>
    function previewImages(file, a) {
        var MAXWIDTH = 90;
        var MAXHEIGHT = 90;
        if (file.files && file.files[0]) {
            $(".close-upimg").eq(a).show();
            var img = document.getElementsByClassName("upimg")[a];
            img.classList.remove("add-img");
            img.onload = function () {
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                img.src = evt.target.result;
            }
            reader.readAsDataURL(file.files[0]);
        }
        var inputName = "file" + "[" + $('.up-section').eq(a).attr('cc') + "]";
        $(".up-section").eq(a).children("input").attr("name", inputName);
        var c = a + 1;
        if ($(".up-section").length < 4 & $(".up-section").length - 1 == a) {
            var $section = $(`<section class='up-section' ` + "cc=" + c + `><span class="close-upimg" style="display: none;">-</span><img  src="./ct.png" onclick="$('.file').eq(` + c + `).click()" class="add-img upimg"/><input type="file" name="" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp"  style="display: none;"  onchange="previewImages(this,` + c + `)" /></section>`);
            $section.appendTo(".z_photo");
        }
    }

    $(".z_photo").delegate(".close-upimg", "click", function () {
        $(".works-mask").show();
        $(".wsdel-ok").attr("cc", $(".close-upimg").index($(this)))

    });
    $(".wsdel-no").click(function () {
        $(".works-mask").hide();
    });
    $(".wsdel-ok").click(function () {
        var index = $(this).attr("cc");
        $(".works-mask").hide();
        var c = parseInt($(".up-section:last").attr("cc"));
        $(".up-section").eq(index).remove();
        if ($(".add-img").length == 0) {
            var $section = $(`<section class='up-section' ` + "cc=" + c + `><span class="close-upimg" style="display: none;">-</span><img  src="./ct.png" onclick="$('.file').eq(` + c + `).click()" class="add-img upimg"/><input type="file" name="" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp"  style="display: none;"  onchange="previewImages(this,` + c + `)" /></section>`);
            $section.appendTo(".z_photo");
        }
        for (var i = 0; i < $(".up-section").length; i++) {
            $(".up-section").eq(i).attr("cc", i)
            $(".up-section").eq(i).children("img").attr("onclick", "$('.file').eq(" + i + ").click()");
            $(".up-section").eq(i).children("input").attr("onchange", "previewImages(this," + i + ")");
            $(".up-section").eq(i).children("input").attr("name", "file[" + i + "]");
        }
        $(".up-section:last").children("input").attr("name", "");
    })

    function clacImgZoomParam(maxWidth, maxHeight, width, height) {
        var param = {
            top: 0,
            left: 0,
            width: width,
            height: height
        };
        if (width > maxWidth || height > maxHeight) {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if (rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>

</html>